<template>
  <div>
    <!--筛选过滤-->
    <div>
      <el-form :model="filterData" size="mini">
        <el-row :gutter="10">
          <el-col style="width: 260px;">
            <el-form-item>
              <el-date-picker v-model="filterData.daterange" type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"
                value-format="yyyy-MM-dd" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col style="width: 160px;">
            <el-form-item>
              <el-select v-model="filterData.platform" style="width: 100%;" placeholder="订单渠道" clearable>
                <el-option v-for="(item,index) in platforms" :label="item.label" :key="item.index" :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="width: 200px;">
            <el-form-item>
              <el-input placeholder="订单号" v-model="filterData.ordercode" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col style="width: 200px;">
            <el-form-item label="" prop="client">
              <el-autocomplete v-model="filterData.client" placeholder="实际客户" :fetch-suggestions="querySearchAsync"
                style="width: 100%;">
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col style="width: 200px;">
            <el-form-item>
              <el-input v-model="filterData.good" placeholder="商品名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 260px;">
            <el-form-item>
              <el-input placeholder="收货信息:收货人,收货电话,收货地址" v-model="filterData.buyerinfo" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width:150px">
            <el-form-item>
              <el-select v-model="filterData.saleman" placeholder="业务员" clearable filterable allow-create>
                <el-option v-for="(item,index) in salemanlist" :label="item.name" :key="item.id"
                  :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="width: 260px;">
            <el-form-item>
              <el-select v-model="filterData.supid" style="width: 100%;" clearable placeholder="合作商名称">
                <el-option v-for="(item,index) in suppliers" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col style="width:260px">
            <el-form-item>
              <el-input placeholder="客户企业名称" v-model="filterData.clientname" clearable></el-input>
            </el-form-item>
          </el-col>


          <el-col style="width:160px">
            <el-form-item>
              <el-select v-model="filterData.supticket_status" placeholder="合作商发票状态" style="width: 100%;" clearable>
                <el-option label="合作商发票-待开具" value="0"></el-option>
                <el-option label="合作商发票-已核销" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>



          <el-col style="width:200px">
            <el-form-item>
              <el-input placeholder="合作商发票号" v-model="filterData.supticketid" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col style="width:200px">
            <el-form-item>
              <el-select v-model="filterData.clientticket" placeholder="客户发票状态" style="width: 100%;" clearable>
                <el-option label="客户发票-待上传" value="0"></el-option>
                <el-option label="客户发票-已上传" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col style="width:200px">
            <el-form-item>
              <el-input placeholder="客户发票号" v-model="filterData.clientticket" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col style="width:200px">
            <el-form-item>
              <el-select v-model="filterData.platformticket_status" placeholder="渠道发票状态" style="width: 100%;" clearable>
                <el-option label="渠道发票-待开" value="1"></el-option>
                <el-option label="渠道发票-已开" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>


          <el-col style="width:200px">
            <el-form-item>
              <el-input placeholder="渠道发票发票号" v-model="filterData.platformticketid" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col style="width:200px">
            <el-form-item>
              <el-select v-model="filterData.cost_bindstatus" placeholder="成本状态" style="width: 100%;" clearable>
                <el-option label="成本状态-不完整" value="0"></el-option>
                <el-option label="成本状态-已完整" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="width: 200px">
            <el-form-item>
              <el-select v-model="filterData.commission_status" placeholder="业务提成状态" clearable>
                <el-option label="业务提成-未结算" value="0"></el-option>
                <el-option label="业务提成-已结算" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col style="width:120px">
            <el-form-item>
              <el-select v-model="filterData.incomes_status" placeholder="收款状态" style="width: 100%;" clearable>
                <el-option label="待收款" value="1"></el-option>
                <el-option label="已收款" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col style="width:120px">
            <el-form-item>
              <el-select v-model="filterData.paid_tatus" placeholder="付款状态" style="width: 100%;" clearable>
                <el-option label="待付款" value="1"></el-option>
                <el-option label="已付款" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>


          <el-col style="width:260px">
            <el-form-item>
              <el-input placeholder="订单备注" v-model="filterData.ordermemo" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 200px;">
            <el-form-item label="" label-width="25px">
              <el-checkbox v-model="filterData.containcancel">包含已取消订单</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col style="width:120px">
            <el-form-item label-width="10px">
              <el-button type="primary" icon="el-icon-search" @click="handleQuery" style="width: 100%;"> 查询
              </el-button>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </div>



    <!--表单-->
    <div>
      <div style="height: 2px; border-bottom: 1px solid #E9E9E9; margin-bottom: 5px;"></div>
      <div style="text-align: right;margin:5px 0px 5px;">
        <el-popconfirm title="确定要导出查询明细吗？" @confirm="handleExport">
          <el-button type="primary" slot="reference" size="mini" icon="el-icon-download"
            :disabled="tableData.length<=0">导出明细</el-button>
        </el-popconfirm>
        <el-popover width="240" trigger="click">
          <el-checkbox-group v-model="columnSelected">
            <el-row :gutter="10">
              <el-col v-for="item in columnHeaders" :key="item.title" :span="12">
                <el-checkbox :label="item.title"></el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
          <el-button slot="reference" icon="el-icon-menu" type="primary" size="mini"
            style="margin-left: 2px;"></el-button>
        </el-popover>
      </div>
      <div class="table-wraper">
        <el-table :data="tableData" ref="tableData" border height="100%" :header-row-style="{height:'30px'}"
        :header-cell-style="{'background-color': '#f5f7f9','color':'#363636',border:'1px solid #e8e8e8'}"
          @selection-change="handleSelection">

          <el-table-column type="index" label="序号" align="center" fixed="left"></el-table-column>
          <el-table-column type="selection" align="center" fixed="left"></el-table-column>
          <el-table-column prop="orderdate" label="下单日期" width="140px"  >
            <template v-slot="scope">
              <span v-if="scope.row.status==3" style="color: #9f9f9f;"><del>{{scope.row.orderdate}}</del></span>
              <span v-if="scope.row.status!=3">{{scope.row.orderdate}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ouid" label="内部单号" v-if="columnHeaders[2].show" width="120px" align="center">
            <template v-slot="scope">
              {{scope.row.ouid}}
            </template>
          </el-table-column>
          <el-table-column prop="ordercode" label="外部单号" v-if="columnHeaders[2].show" width="120px" align="center">
            <template v-slot="scope">
              {{scope.row.ordercode}}
            </template>
          </el-table-column>
          <el-table-column prop="platform" label="渠道名称"   width="130px" align="center">
            <template v-slot="scope">
              <span>{{scope.row.platform}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sn" label="产品编码" v-if="columnHeaders[3].show" width="120px" align="center" show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.status==3" style="color: #9f9f9f;"><del>{{scope.row.sn}}</del></span>
              <span v-if="scope.row.status!=3">{{scope.row.sn}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="商品名称" v-if="columnHeaders[4].show" min-width="180px"
            show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.status==3" style="color: #9f9f9f;"><del>{{scope.row.title}}</del></span>
              <span v-if="scope.row.status!=3">{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="计量单位" v-if="columnHeaders[5].show" show-overflow-tooltip width="80px"
            align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==3" style="color: #9f9f9f;"><del>{{scope.row.unit}}</del></span>
              <span v-if="scope.row.status!=3">{{scope.row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="数量" v-if="columnHeaders[6].show" show-overflow-tooltip width="80px"
            align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==3" style="color: #9f9f9f;"><del>{{scope.row.count}}</del></span>
              <span v-if="scope.row.status!=3">{{scope.row.count}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" v-if="columnHeaders[7].show" show-overflow-tooltip width="80px"
            align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==3" style="color: #9f9f9f;"><del>{{scope.row.price}}</del></span>
              <span v-if="scope.row.status!=3">{{scope.row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="订单额" v-if="columnHeaders[8].show" width="90px" align="center">
            <template v-slot="scope">
              <span v-if="scope.row.status==3" style="color: #9f9f9f;"><del>{{scope.row.total}}</del></span>
              <span v-if="scope.row.status!=3">{{scope.row.total}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="suptotal" label="折扣额" v-if="columnHeaders[9].show" width="90px" align="center"
            show-overflow-tooltip>
            <template v-slot="scope">
              <span v-if="scope.row.status==3" style="color: #9f9f9f;"><del>{{scope.row.suptotal}}</del></span>
              <span v-if="scope.row.status!=3">{{scope.row.suptotal}}</span>
            </template>
          </el-table-column>
          <el-table-column label="收货信息" align="center">
            <el-table-column label="收货人" width="95px" align="center" v-if="columnHeaders[10].show"
              show-overflow-tooltip>
              <template v-slot="scope">
                <span v-if="scope.row.status==3" style="color: #9f9f9f;"><del>{{scope.row.buyerinfo.buyer}}</del></span>
                <span v-if="scope.row.status!=3">{{scope.row.buyerinfo.buyer}}</span>
              </template>
            </el-table-column>
            <el-table-column label="收货电话" width="120px" align="center" show-overflow-tooltip
              v-if="columnHeaders[11].show">
              <template v-slot="scope">
                <span v-if="scope.row.status==3"
                  style="color: #9f9f9f;"><del>{{scope.row.buyerinfo.mobile}}</del></span>
                <span v-if="scope.row.status!=3">{{scope.row.buyerinfo.mobile}}</span>
              </template>
            </el-table-column>
            <el-table-column label="收货地址" width="100px" align="center" show-overflow-tooltip
              v-if="columnHeaders[11].show">
              <template v-slot="scope">
                <span v-if="scope.row.status==3"
                  style="color: #9f9f9f;"><del>{{scope.row.buyerinfo.address}}</del></span>
                <span v-if="scope.row.status!=3">{{scope.row.buyerinfo.address}}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户单位" align="center" prop="clientname" show-overflow-tooltip ></el-table-column>
          </el-table-column>
          <el-table-column label="业务员" align="center" show-overflow-tooltip prop="saleman"></el-table-column>
          <el-table-column label="合作商" prop="supname" width="120px" show-overflow-tooltip></el-table-column>
          <el-table-column label="采购成本" align="center">
            <template slot="header">
              <div style="text-align: center;">采购成本</div>
            </template>
            <el-table-column label="采购单号" prop="cost_bindreqcode" align="center" width="100px" show-overflow-tooltip>
              <template v-slot="scope">
                <span>{{scope.row.bind_buycodes}}</span>
              </template>
            </el-table-column>
            <el-table-column label="成本总额" prop="bind_buysum" align="center" width="95px">
              <template v-slot="scope">
                  {{scope.row.bind_buysum}}
              </template>
            </el-table-column>
            <el-table-column label="成本状态" prop="bind_buystatus" align="center" width="80px">
              <template v-slot="scope">
                <span v-if="scope.row.bind_buystatus==0" style="color: #F56C6C;">不完整</span>
                <span v-if="scope.row.bind_buystatus==1" style="color: #67C23A;">完整</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="deliver_status" label="进项" width="90" align="center" v-if="columnHeaders[12].show">
            <template v-slot="scope">
              <div style="cursor: pointer;">
                <span v-if="scope.row.supticket_status==0" style="color: #F56C6C;">未申请</span>
                <span v-if="scope.row.supticket_status==1" style="color: #E6A23C;">审核中</span>
                <span v-if="scope.row.supticket_status==2" style="color: #E6A23C;">待上传</span>
                <span v-if="scope.row.supticket_status==3" style="color: #F56C6C;">审核不通过</span>
                <span v-if="scope.row.supticket_status==4" style="color: #63A35C;">已上传</span>
                <span v-if="scope.row.supticket_status==5" style="color: #67C23A;">已签收</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="付款" width="80px" show-overflow-tooltip align="center" v-if="columnHeaders[13].show">
            <template v-slot="scope">
              <el-popover v-if="scope.row.deliver_status>=0" trigger="hover" effect="light" placement="top">
                <div>已付: {{scope.row.paidamount}}</div>
                <div slot="reference">
                  <span v-if="scope.row.paidstatus==0" style="color: #F56C6C;">未付款</span>
                  <span v-if="scope.row.paidstatus==1" style="color: #67C23A;">已付款</span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="备注" show-overflow-tooltip align="center" v-if="columnHeaders[14].show"></el-table-column>
          <el-table-column label="操作" align="center" width="80px" fixed="right">
            <template v-slot="scope">
              <el-button-group>
                <el-button icon="el-icon-s-ticket" circle title="绑定成本"
                  @click="handleShowBind(scope.$index,scope.row)"></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div style="display: flex;">
      <div style="flex: 1; line-height: 45px;">
        <span style="margin-right: 30px;">订单总额:{{parseFloat(sum).toFixed(2)}}</span>
        <span style="margin-right: 30px;">应收总额:{{parseFloat(supsum).toFixed(2)}} </span>
        <span style="margin-right: 30px;">成本总额:{{parseFloat(sumcost).toFixed(2)}}</span>
        <span style="margin-right: 30px;">选中订单总额:{{parseFloat(sumamount_selection).toFixed(2)}}</span>
        <span style="margin-right: 30px;">选中应收总额:{{parseFloat(sumsup_selection).toFixed(2)}}</span>
        <span style="margin-right: 30px;">选中成本总额:{{parseFloat(sumcost_selection).toFixed(2)}}</span>
      </div>
      <div style="margin-top: 10px; text-align: right;">
        <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
          layout=" prev, pager, next,sizes,total" :page-sizes="[25, 50, 80]" :total="total" :page-size="pagesize"
          :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>

    <BindCostUI v-if="bindcostVisible" ref="bindcostUI" @complete="handleCostComplete"></BindCostUI>
  </div>
</template>

<script>
  import qs from 'qs';
  import BindCostUI from './BindCostUI.vue';

  export default {
    components: {
      BindCostUI
    },
    watch: {
      columnSelected(newArrayVal) {
        this.columnHeaders.filter(item => {
          if (newArrayVal.indexOf(item.title) != -1) {
            item.show = true;
          } else {
            item.show = false;
          }
        })
        this.$nextTick(() => {
          this.$refs.tableData.doLayout()
        })

        localStorage.setItem(this.$route.name, JSON.stringify(newArrayVal));
      }
    },
    data() {
      return {
        platforms: [],
        salemanlist: [],
        columnSelected: ["下单时间", "类型", "子订单号", "京东编码", "商品名称", "计量单位", "数量", "单价", "订单额", "折扣额", "收货人", "收货地址", "进项",
          "付款", "备注"
        ],
        columnHeaders: [{
          "title": "下单时间",
          "show": true
        }, {
          "title": "类型",
          "show": true
        }, {
          "title": "子订单号",
          "show": true
        }, {
          "title": "京东编码",
          "show": true
        }, {
          "title": "商品名称",
          "show": true
        }, {
          "title": "计量单位",
          "show": true
        }, {
          "title": "数量",
          "show": true
        }, {
          "title": "单价",
          "show": true
        }, {
          "title": "订单额",
          "show": true
        }, {
          "title": "折扣额",
          "show": true
        }, {
          "title": "收货人",
          "show": true
        }, {
          "title": "收货地址",
          "show": true
        }, {
          "title": "进项",
          "show": true
        }, {
          "title": "付款",
          "show": true
        }, {
          "title": "备注",
          "show": true
        }],
        pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              var date = new Date()
              var year = date.getFullYear().toString()
              var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1)
                .toString()
              // var da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
              var da = new Date(date.getFullYear(), month, 0).getDate()
              da < 10 ? '0' + da.toString() : da.toString()
              const end = year + '-' + month + '-' + da;
              const start = year + '-' + month + '-01';
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        filterData: {
          filterData: {
            daterange: '',
            type: '',
            mordercode: '',
            ordercode: '',
            supid: '',
            subordercode: '',
            sticket_status: '',
            buyerinfo: '',
            platform: '',
            good: '',
            ordermemo: '',
            incomes_status: '',
            paid_tatus: '',
            supticket_status: '',
            platformticketid: '',
            supticketid: '',
            commission_status: '',
            saleman: '',
            client:'',
            clientname:'',
            containcancel: true,
            cost_bindstatus: ''
          },

        },
        suppliers:[],
        platforms:[],
        tableData: [],
        //分页相关
        curpage: 1,
        pagesize: 25,
        total: 1,
        sum: 0,
        supsum: 0,
        sumcost: 0,
        sumcost_selection: 0,
        sumamount_selection: 0,
        sumsup_selection: 0,
        bindcostVisible: false,
      }
    },
    created() {
      if (localStorage.getItem(this.$route.name) == null) {
        localStorage.setItem(this.$route.name, JSON.stringify(this.columnSelected));
      } else {
        this.columnSelected = JSON.parse(localStorage.getItem(this.$route.name));
      }
      this.loadPlatforms();
      this.loadDataList();
      this.loadSalemans();
    },
    methods: {
      querySearchAsync(str, cb) {
        this.axios.post("api/admin/clientuser/filter", {
          username: str
        }).then(res => {
          if (res.data.code) {
            cb(res.data.data);
          }
        })
      },
      handleQuery(){
         this.curpage=1;
         this.loadDataList();
      },
      loadPlatforms: function() {
       this.axios.post("/api/admin/platform/list").then(res => {
         if (res.status == 200 && res.data.code == 0) {
           this.platforms = res.data.platforms;
         }
       })
     },
      handleSelection(selection) {
        this.selection = selection;

        this.sumamount_selection = 0;
        this.sumsup_selection = 0;
        this.sumcost_selection = 0;
        this.selection.forEach((item) => {
          this.sumamount_selection += item.amount;
          this.sumsup_selection += item.suptotal;
          this.sumcost_selection += item.cost_bindrmb;
        })
      },
      loadSalemans() {
        this.axios.post("api/admin/mate/list_op").then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.salemanlist = res.data.list;
          }
        })
      },
      handleShowBind(index, data) {
        this.bindcostVisible = true;
        this.$nextTick(() => {
          this.$refs.bindcostUI.dialogVisible = true;
          this.$refs.bindcostUI.initData(index, JSON.parse(JSON.stringify(data)));
        })
      },
      handleCostComplete(index, data) {
        console.log('绑定结束', data);
        this.tableData[index].cost_bindrmb = parseFloat(data.sum_rmb).toFixed(4);
        this.tableData[index].cost_bindstatus = data.cost_bindstatus;
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      loadDataList() {
        const params = {
          curpage: this.curpage,
          pagesize: this.pagesize,
          daterange: this.filterData.daterange,
          platformid: this.filterData.platformid,
          platform:this.filterData.platform,
          title: this.filterData.title,
          sn: this.filterData.sn,
          ordercode: this.filterData.ordercode,
          buyerinfo: this.filterData.buyerinfo,
          supticket_status: this.filterData.supticket_status,
          paid_status: this.filterData.paid_status,
          containcancel: this.filterData.containcancel ? 1 : 0,
          cost_bindstatus: this.filterData.cost_bindstatus,
          requester: this.filterData.requester,
          supname: this.filterData.supname,
          reqcode: this.filterData.reqcode
        };
        this.axios.post("api/admin/orderdetail/list", params).then((res) => {
          if (res.status == 200 && res.data.code == 1) {
            console.log(res.data.list);

            this.tableData = res.data.list;
            this.total = res.data.count;
            this.sum = res.data.sum;
            this.supsum = res.data.supsum;
            this.sumcost = res.data.sumcost;
          }
        })
      },
      handleExport() {
        const params = {
          curpage: this.curpage,
          pagesize: this.pagesize,
          daterange: this.filterData.daterange,
          type: this.filterData.type,
          title: this.filterData.title,
          sn: this.filterData.sn,
          ordercode: this.filterData.ordercode,
          mordercode: this.filterData.mordercode,
          buyerinfo: this.filterData.buyerinfo,
          supticket_status: this.filterData.supticket_status,
          paid_status: this.filterData.paid_status,
          token: localStorage.getItem("token") == null ? "" : localStorage.getItem("token"),
        };

        window.open(this.axios.default.baseURL + "/admin/jd/orderdetail/export?" + qs.stringify(params));

      }
    }
  }
</script>

<style scoped>
  .table-wraper {
    height: calc(100vh - 290px);
  }
</style>
